<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12 },
  };

  const formState = reactive({
    fileList1: [],
    fileList2: [],
    fileList3: [],
    time: '',
  });

  const columns = [
    { title: '策略名称', dataIndex: 'name', key: 'name', width: 150, align: 'center' },
    { title: '开始时间', dataIndex: 'startTime', key: 'startTime', align: 'center' },
    { title: ' 结束时间', dataIndex: 'endTime', key: 'endTime', align: 'center' },
    { title: '策略文件', dataIndex: 'file', key: 'file', align: 'center' },
  ];

  const tableData = ref([
    {
      name: '综合优化策略',
      startTime: '2024-06-01 12:55',
      endTime: '2024-07-01 12:55',
    },
    {
      name: '需求侧响应策略',
      startTime: '2024-06-01 12:55',
      endTime: '2024-07-01 12:55',
    },
    {
      name: '离网/断网策略',
      startTime: '2024-06-01 12:55',
      endTime: '2024-07-01 12:55',
    },
  ]);
</script>

<template>
  <div class="container">
    <a-row :gutter="[10, 10]">
      <a-col :span="10">
        <a-card title="策略介绍">
          <a-form v-bind="layout" :model="formState">
            <a-form-item label="综合优化策略" name="fileList1">
              <a-upload
                v-model:file-list="formState.fileList1"
                name="file"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                @change="handleChange"
                :showUploadList="false"
              >
                <a-button> 策略配置 </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item label="需求侧响应策略" name="fileList2">
              <a-upload
                v-model:file-list="formState.fileList2"
                name="file"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                @change="handleChange"
                :showUploadList="false"
              >
                <a-button> 策略配置 </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item label="离网/断网策略" name="fileList3">
              <a-upload
                v-model:file-list="formState.fileList3"
                name="file"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                @change="handleChange"
                :showUploadList="false"
              >
                <a-button> 策略配置 </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item label="新策略执行起止时间" name="accumulatedPowerGeneration">
              <a-range-picker v-model:value="time" :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm" />
            </a-form-item>

            <a-form-item :wrapper-col="{ span: 14, offset: 2 }">
              <a-button type="primary" @click="onSubmit">确认增加策略</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card title=" 执行策略列表">
          <a-table :columns="columns" :data-source="tableData" rowKey="id">
            <template #bodyCell="{ column, text, record }">
              <template v-if="['file'].includes(column.dataIndex)">
                <div>
                  <a-button type="primary">策略文件</a-button>
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .ant-card {
    width: 100%;
    min-height: 1000px;
  }

  .plan {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
</style>
